import React, { useCallback, useEffect, useState } from 'react'
import { Table, Space, Modal, Button  } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import axios from '../../../../http/index'
import './css/DataList.scss'

export default function DataList() {
    useEffect(() => {
        // axios({
        //     method: 'GET',
        //     url: '/system/afterloan/normalpay/queryNormal',
        //     params: {
        //         currentPage: 1,
        //         pageSize: 5
        //     }
        // }).then((res) => {
        //     console.log(res)
        // }).catch((err) => {
        //     console.log(err)
        // })
        console.log('useEffect')
    }, [])
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [selectItem, setSelectItem] = useState('')
    const handleOpen = (record) => {
        setSelectItem(record)
        setIsModalVisible(true)
    }
    const handleOk = () => {
        setIsModalVisible(false);
      }
    const handleCancel = () => {
        setIsModalVisible(false);
      }
    const columns = [
        {
          title: '合同编号',
          dataIndex: 'contract_no',
          key: 'contract_no',
          width: 120
        },
        {
          title: '用户账号',
          dataIndex: 'account',
          key: 'account',
          width: 120
        },
        {
          title: '用户姓名',
          dataIndex: 'name',
          key: 'name',
          width: 120
        },
        {
            title: '资金方',
            dataIndex: 'funding_side',
            key: 'funding_side',
            width: 120
        },
        {
            title: '贷款总额',
            dataIndex: 'loan_amount',
            key: 'loan_amount',
            width: 120
        },
        {
            title: '应还款日',
            dataIndex: 'due_date',
            key: 'due_date',
            width: 120
        },
        {
            title: '电话提醒',
            key: 'phone',
            width: 120,
            render: (record) => (
              <Space size="middle">
                <a onClick={() => handleOpen(record)}>电话提醒</a>
              </Space>
            ),
          },
        {
            title: '产品利率',
            dataIndex: 'product_rate',
            key: 'product_rate',
            width: 120
        },
        {
            title: '应还本金',
            dataIndex: 'principal_repayable',
            key: 'principal_repayable',
            width: 120
        },
        {
            title: '应还利息',
            dataIndex: 'interest_repayable',
            key: 'interest_repayable',
            width: 120
        },
        {
            title: '保证金',
            dataIndex: 'security_deposit',
            key: 'security_deposit',
            width: 120
        },
        {
            title: '应还总额',
            dataIndex: 'total_amount_due',
            key: 'total_amount_due',
            width: 120
        },
        {
            title: '还款状态',
            dataIndex: 'repayment_status',
            key: 'repayment_status',
            width: 120,
            render: (text, record) => {
                if(record.repayment_status===1){
                    return (
                        <span>已还</span>
                    )
                } if(record.repayment_status===2){
                    return (
                        <span>未还</span>
                    )
                }
            }
        }
      ];
      const dataList = [
          {
            id: 1,
            contract_no: "08041210495",
            account: 15315130950,
            name: "蔡文学",
            phone: 18660813695,
            funding_side: "苏州银行",
            loan_amount: "¥2000.00",
            due_date: "2018-09-10",
            product_rate: 1.1,
            principal_repayable: 0.00,
            interest_repayable: 1045.00,
            security_deposit: 0.00,
            total_amount_due: 1045.00,
            repayment_status: 1
          },
          {
            id: 2,
            contract_no: "08041210495",
            account: 15315130950,
            name: "黄小明",
            phone: 18660813695,
            funding_side: "齐鲁银行",
            loan_amount: "¥2000.00",
            due_date: "2018-09-10",
            product_rate: 1.1,
            principal_repayable: 0.00,
            interest_repayable: 1045.00,
            security_deposit: 0.00,
            total_amount_due: 1045.00,
            repayment_status: 2
          }
      ]
      const phoneList = [
          {
              id: 1530117187,
              time: "2018-01-22 14：57：17",
              willingness_pay: 1,
              phonedate: "01分13秒",
              statu: 1,
              number_calls: 1
          },
          {
            id: 1530117188,
            time: "2018-01-22 14：57：17",
            willingness_pay: 3,
            phonedate: "24秒",
            statu: 2,
            number_calls: 1
        },
        {
            id: 1530117189,
            time: "2018-01-22 14：57：17",
            willingness_pay: 3,
            phonedate: "24秒",
            statu: 5,
            number_calls: 2
        },
        {
            id: 1530117190,
            time: "2018-01-22 14：57：17",
            willingness_pay: 3,
            phonedate: "24秒",
            statu: 4,
            number_calls: 1
        }
      ]
      const phoneColumns = [
        {
            title: '通话ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '通话时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '意向标签',
            dataIndex: 'willingness_pay',
            key: 'willingness_pay',
            render: (text, record) => {
                if(record.willingness_pay===1){
                    return (
                        <span>承诺还款</span>
                    )
                } if(record.willingness_pay===2){
                    return (
                        <span>拒绝还款</span>
                    )
                } if(record.willingness_pay===3){
                    return (
                        <span>意向模糊</span>
                    )
                }
            }
        },
        {
            title: '通话时长',
            dataIndex: 'phonedate',
            key: 'phonedate',
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
            render: (text, record) => {
                if(record.statu===1){
                    return (
                        <span>接听</span>
                    )
                } if(record.statu===2){
                    return (
                        <span>未接</span>
                    )
                } if(record.statu===3){
                    return (
                        <span>空号</span>
                    )
                } if(record.statu===4){
                    return (
                        <span>停机</span>
                    )
                } if(record.statu===5){
                    return (
                        <span>占线</span>
                    )
                }
            }
        },
        {
            title: '呼叫次数',
            dataIndex: 'number_calls',
            key: 'number_calls',
        }
    ]
    return (
        <div className='box3'>
            <div className='top'>
                <span className='title1'>数据列表</span>
            </div>
            <div className='list'>
                <Table scroll={{ x: 1500 }} rowKey={record => record.id} dataSource={dataList} columns={columns} pagination={{pageSize:5, total: 100, showSizeChanger:false}} />
            </div>
            <Modal title="通话记录" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消" width={700}>
                <div className='phone-top'>
                    <div className='phone-top-left'>
                        <UserOutlined className='phone-icon'/>
                        <div>
                            <div className='name'>客户名称：{selectItem.name}</div>
                            <div className='name'>联系电话：{selectItem.phone}</div>
                        </div>
                    </div>
                    <div className='phone-tag'>
                        <div className='tag1'>A级（还款意向明确）</div>
                        <div className='tag2'>意向标签</div>
                    </div>
                </div>
                <Table rowKey={record => record.id} dataSource={phoneList} columns={phoneColumns} pagination={false}/>
            </Modal>
        </div>
    )
}
